<template>
  <div ref="chartEl" style="height: 100%; width: 100%" />
</template>
<script>
import * as echarts from 'echarts'
// eslint-disable-next-line no-unused-vars
import macarons from './macarons'
// eslint-disable-next-line no-unused-vars
import walden from './walden'
// eslint-disable-next-line no-unused-vars
// import vintage from './vintage'
// eslint-disable-next-line no-unused-vars
import roma from './roma'
export default {
  props: {
    option: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chart: null
    }
  },

  watch: {
    option: {
      handler(newOption) {
        if (this.chart) {
          this.chart.setOption(newOption)
        }
      },
      deep: true
    }
  },

  mounted() {
    this.chart = echarts.init(this.$refs.chartEl, 'roma')
    this.chart.setOption(this.option)
  }
}
</script>
